<template>
  <div class="approve-container" v-if="appShows">
    <el-dialog :title="title" :visible.sync="open1" width="500px" @close="cancel" append-to-body>
      <el-form ref="appform" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="原因" prop="approveReson">
              <el-input v-model="form.approveReson" placeholder="请输入原因" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="appTypes === 0">
          <el-col :span="24">
            <el-form-item label="审核结果" prop="approveId">
              <el-select style="width:100%;" v-model="form.approveId" @change="changeApprove" placeholder="请选择审核结果">
                <el-option
                  v-for="(item,index) in appList"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {modelApprove, updateModel} from "@/api/system/modelList";

export default {
  name: "approveModel",
  props: {
    appTypes: {
      default: 0
    },
    ids: {
      default: ''
    },
    appShows: {
      default: false
    }
  },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open1: true,
      form: {},
      appType: 0,
      appList: [
        {
          label: '审核通过',
          value: 0
        },
        {
          label: '审核不通过',
          value: 1
        },
      ],
      rules: {
        approveReson: [
          { required: true, message: "原因不能为空", trigger: "blur" }
        ],
        approveId: [
          { required: true, message: "结果不能为空", trigger: "select" }
        ]
      }
    }
  },
  // watch: {
  //   'ids'(newv,oldv) {
  //     console.log(newv,oldv)
  //     // this.form.treeId = newv || oldv
  //   },
  //   'appTypes'(newv,oldv) {
  //     if(newv === 0) {
  //       this.title = '认领审核'
  //     } else {
  //       this.title = '结束认养'
  //       this.form.approveId = 2
  //     }
  //   }
  // },
  mounted() {
    // this.form.treeId = this.ids
    // if(this.appTypes === 0) {
    //   this.title = '认领审核'
    // } else {
    //   this.title = '结束认养'
    //   this.form.approveId = 2
    // }
    // console.log(this.ids)
  },
  methods: {
    open(id,type) {
      console.log(id,type)
      this.open1 = true
      this.form.treeId = id
      if(type === 0) {
        this.title = '认领审核'
      } else {
        this.title = '结束认养'
        this.form.approveId = 2
      }
    },
    // 权限问题
    changeApprove() {
      console.log(this.form.approveId)
      if(this.form.approveId === 0) {
        this.$refs["appform"].clearValidate(["approveReson"])
        this.$delete(this.rules,'approveReson')
      }else {
        this.$set(this.rules,'approveReson', [{ required: true, message: "原因不能为空", trigger: "blur" }])
      }
    },
    // 取消按钮
    cancel() {
      this.$set(this.rules,'approveReson', [{ required: true, message: "原因不能为空", trigger: "blur" }])
      this.$emit('appClose',1)
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        treeId: null,
        approveId: null,
        approveReson: null
      };
      this.resetForm("appform");
    },
    submitForm() {
      this.$refs["appform"].validate(valid => {
        if (valid) {
          modelApprove(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.$set(this.rules,'approveReson', [{ required: true, message: "原因不能为空", trigger: "blur" }])
            this.cancel()
            this.$emit('appHandle',1)
          });
        }
      });
    },
  }
}
</script>

<style scoped>

</style>
